@import './config';

$mobileSidebarWidth = $sidebarWidth * 0.82;

// narrow desktop / iPad
@media (max-width: $MQNarrow) {
  .sidebar {
    font-size: 15px;
    width: $mobileSidebarWidth;
  }

  .page {
    padding-left: $mobileSidebarWidth;
  }
}

// wide mobile
@media (max-width: $MQMobile) {
  .sidebar {
    top: 0;
    padding-top: $navbarHeight;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .page {
    padding-left: 0;
  }

  .theme-container {
    &.sidebar-open {
      .sidebar {
        transform: translateX(0);
      }
    }

    &.no-navbar {
      .sidebar {
        padding-top: 0;
      }
    }
  }
}

// narrow mobile
@media (max-width: $MQMobileNarrow) {
  h1 {
    font-size: 1.9rem;
  }

  .content {
    div[class*='language-'] {
      margin: 0.85rem -1.5rem;
      border-radius: 0;
    }
  }
}
